{% extends 'base.html' %}
{% load static %}

{% block title %}{{ project.project_name }}{% endblock %}

{% block css_styles %}
    <link rel="stylesheet" href="{% static 'style.css' %}">
    <link rel="stylesheet" href="{% static 'table.css' %}">
    <link rel="stylesheet" href="{% static 'modal_window.css' %}">
    <link rel="stylesheet" href="{% static 'editor/editor.css' %}">
    <link rel="stylesheet" href="{% static 'editor/style.css' %}">
    <link rel="stylesheet" href="{% static 'editor/header.css' %}">
    <link rel="stylesheet" href="{% static 'editor/project/style.css' %}">
    <link rel="stylesheet" href="{% static 'editor/project/simplemde.min.css' %}">
    <link rel="stylesheet" href="{% static 'font-awesome-min.css' %}">
{% endblock %}

{% block content %}

    {% include 'editor/header.html' %}

    <div class="content">

        <p class="path">{{ project.project_name }}</p>

        <section class="preview-project">
            <main>
                <div class="project-icon" style="--icon-url: url('/media/{{ project.icon }}')"></div>
                <div class="project-info">
                    <h2 class="name">{{ project.name }}</h2>
                    <p class="description">{{ project.description }}</p>
                </div>
            </main>
            <div class="buttons-edit">
                <div class="button button-change-info" data-url="{% url 'editor:edit_project' project_id=project.id %}"></div>
                <div class="button button-remove" data-modalwindow="#remove_project"></div>
            </div>
        </section>

        <section class="tabs-menu unselectable">
            <header class="tabs-buttons">
                <h2 data-content="project-tasks" class="tab-button active">Задания</h2>
                <h2 data-content="edit-info" class="tab-button">Описание</h2>
                <h2 data-content="project-settings" class="tab-button">Настройки</h2>
            </header>
            <div class="tabs-line"></div>
        </section>

        <section class="tab project-tasks">

            {% if not is_empty %}

                <main>
                    {{ tasks_table }}
                </main>

            {% endif %}

            <div class="button button-secondary button-create-task" data-modalwindow="#creation_task">
                Создать задание
            </div>

            <div class="editor-bar hidden">
                <div class="content-relative">
                    <div class="button button-save-changes">Сохранить изменения</div>
                </div>
            </div>
        </section>

        <section class="tab edit-info tab-relative not-visible" id="#edit-info">
            <form action="upload_description/" method="POST" id="edit-info-form">
                {% csrf_token %}
                <button type="sumbit" name="SEND UPDATES" class="button button-save-md not-allowed">Сохранить</button>
                <textarea id="edit-info" name="markdown_field">
{{ project.description_md }}</textarea>
            </form>
        </section>

        <section class="tab project-settings hidden">
            <p>Тут находятся настройки</p>
        </section>

        {% csrf_token %}

    </div>

    {% include 'editor/project/modal_window/remove_project.html' %}
    {% include 'editor/project/modal_window/creation_task.html' %}

    {% include 'footer.html' %}

{% endblock %}

{% block js_scripts %}
    <script src="{% static 'editor/changes.js' %}"></script>
{#    <script src="{% static 'editor/project.js' %}"></script>#}
    <script src="{% static 'editor/editor_object.js' %}"></script>
    <script src="{% static 'editor/project/tasks_table.js' %}"></script>
    <script src="{% static 'editor/project/tabs-menu.js' %}"></script>
    <script>
        let changesManager = new ChangesManager('.editor-bar');

        let table = new TasksTable('tasks_table');
        changesManager.addElement(table)
        table.setManager(changesManager)

        let button = document.querySelector('.button-save-changes');
        button.onclick = function () {
            changesManager.sendUpdates()
        };

    </script>
    <script src="{% static 'editor/project/simplemde.min.js' %}"></script>
    <script src="{% static 'editor/project/md-editor.js' %}"></script>
{% endblock %}
